<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物料档案</title>
      <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" >
      <script src="/static/bootstrap/js/bootstrap.bundle.min.js" ></script>
  </head>
  <body>
{% include "utils/header.html"%}

<div class="container">
  <h1>档案</h1>
  <div style="height: 20px">
    {% if messages %}
      {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show ">
         {{ message }}
         <!-- 手动关闭按钮（可选） -->
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
  </div>
  {% endfor %}
         <!-- 自动隐藏脚本 -->
  <script>
    // 等待页面加载完成
    document.addEventListener('DOMContentLoaded', function() {
      // 选择所有alert元素
      const alerts = document.querySelectorAll('.alert');
      // 遍历每个alert，设置3秒后隐藏（3000毫秒）
      alerts.forEach(alert => {
        setTimeout(() => {
          // 为隐藏添加淡出动画（需要Bootstrap支持）
          alert.classList.remove('show');
          alert.classList.add('fade');
          // 完全隐藏后移除元素（可选）
          setTimeout(() => alert.remove(), 500);
        }, 3000); // 3秒后执行
      });
    });
  </script>
{% endif %}
</div>

   <div class="container">

<!-- 搜索表单 -->
        <form id="form" method="get" action="{% url 'wl_list' %}" >
        <div class="search-form d-flex align-items-center gap-2 mb-3">
            <a  type="button" class="col-auto btn btn-primary" href="/base/wl/add">新增</a>
        {% csrf_token %}
        <input type="hidden" name="_methods" value="DELETE">
            <button type="submit"  formmethod="post"  formaction="{% url 'wl' %}" class="col-auto  btn btn-danger">批量删除</button>
        <div class="col-2">
            <select   class="form-select" style="padding-top: 3px;margin-top: 1px;margin-bottom: 1px" name="select_type">
              <option value="1" {% if request.GET.select_type == '1' %}selected{% endif %}>启用</option>
              <option value="0" {% if request.GET.select_type == '0' %}selected{% endif %} >停用</option>
            </select>
        </div>
        <div class="col-2">
            <select   class="form-select" style="padding-top: 3px;margin-top: 1px;margin-bottom: 1px" name="material_type_search">
              <option value="all" {% if request.GET.material_type_search == 'all' %}selected{% endif %}>全部</option>
                <option value="raw" {% if request.GET.material_type_search == 'raw' %}selected{% endif %}>原料</option>
              <option value="additive" {% if request.GET.material_type_search == 'additive' %}selected{% endif %} >添加剂</option>
            <option value="packaging" {% if request.GET.material_type_search == 'packaging' %}selected{% endif %} >包材</option>
            <option value="intermediate" {% if request.GET.material_type_search == 'intermediate' %}selected{% endif %} >中间品</option>
            <option value="finished" {% if request.GET.material_type_search == 'finished' %}selected{% endif %} >成品</option>
            </select>
        </div>
        <div class="col-2">
            <input class="form-control" type="text" name="q" placeholder="搜索品名"
                   value="{{ request.GET.q|default:'' }}">
         </div>
            <button type="button" onclick="searchClick()" class="col-auto btn btn-light">搜索</button>
            {% if request.GET.q %}
                <a href="{% url 'wl_list' %}">清除搜索</a>
            {% endif %}


        </div>
    <div class="search-form d-flex align-items-center gap-2 mb-3 " >
        <div class="col-auto">
     <input type="checkbox" id="selectAll"> 全选 </div>
    {% include "utils/printtools.html"%}

    </div>
<script type="text/javascript">
            // 修正函数定义：使用标准函数声明，去掉错误的 => 语法
function searchClick() {


        const form = document.getElementById('form');
        // 阻止表单默认提交事件（如果有的话）
            form.onsubmit = function(e) {
                e.preventDefault();
                return false;
            };
        // 若报表设计接口不同，修改 action
        form.action = "{% url 'wl_list' %}" ;
        form.method='get'
        form.target="_self"
        form.submit();
    }

</script>

   <div class="row">
   {% for raw in wl_list %}
       <!-- 遍历值列表 -->
       <div class="col-lg-3 " style="padding-top: 10px;padding-left: 10px">
        <div class="card " >
           <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">{{ raw.name }}</h5>
                <input type="checkbox" class="delete-item" name="delete_ids" value="{{ raw.pk }}-{{ raw.wl }}">
            </div>

          <div class="card-body">

              <div class="card-title">{% if raw.state == '1' %}
                  <span class="badge bg-primary">启用</span>
              {% else %}<span  class="badge bg-danger">停用</span>{% endif %}
              <span class="badge bg-secondary">
                  {% if raw.wl == 'raw' %}原料
                  {% elif  raw.wl == 'additive' %}添加剂
                  {% elif  raw.wl == 'packaging' %}包材
                  {% elif  raw.wl == 'intermediate' %}中间品
                  {% elif  raw.wl == 'finished' %}成品
                  {% endif %}
              </span>
               <span class="badge bg-info"> {{ raw.code  }}</span>


              </div>
              <h6 class="card-subtitle mb-2 text-muted">{{ raw.standard }}</h6>
              <div  class="card-text">

                <p>{{ raw.create_at }}</p>

                  </div>

              <!-- 按钮容器：使用 Flex 布局，水平排列，居中对齐，添加间距 -->
            <div class="card-text d-flex justify-content-center align-items-center gap-2">

             <a href="/base/wl/add/?pk={{ raw.pk }}&material_type={{ raw.wl }}" class="btn btn-primary ">修改</a>

                  <form class="m-0"
                method="post"
                action="/base/wl/add/"
                onsubmit="return confirm('确定删除这条记录吗？')"  >
                {% csrf_token %}  <!-- 必须添加，否则CSRF验证失败 -->
                <!-- 核心：指定请求方法为DELETE -->
                <input type="hidden" name="_method" value="DELETE">
                  <input type="hidden" name="pk" value="{{ raw.pk  }}">
                  <input type="hidden" name="material_type" value="{{ raw.wl  }}">
                <button type="submit" class="btn btn-danger ">删除</button>
                </form>
              </div>


           </div>
          </div>
        </div>

   {% endfor %}
   </div>
 </form>
    <!-- 分页（如果使用 ListView 并设置了 paginate_by） -->
    {% if is_paginated %}
    <ul class="pagination pagination-sm">

        {% if page_obj.has_previous %}
            <li class="page-item">
            <a href="?page=1{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}" class="page-link"  >首页</a>

            <li class="page-item" >
            <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}" class="page-link">上一页</a>
            </li>
        {% endif %}
        <li class="page-item" >
        <span >第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页</span>
        </li>
        {% if page_obj.has_next %}
             <li class="page-item" >
            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}">下一页</a>
            </li>
             <li class="page-item" >
            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.select_type %}&select_type={{ request.GET.select_type }}{% endif %}{% if request.GET.material_type_search %}&material_type_search={{ request.GET.material_type_search }}{% endif %}">末页</a>
            </li>
        {% endif %}
        <!-- 跳转到指定页 -->
    <li class="page-item">
        <form method="get" style="display: flex; align-items: center;">
            <!-- 保留当前页面的其他GET参数（如搜索条件） -->
            {% for key, value in request.GET.items %}
                {% if key != 'page' %}
                    <input type="hidden" name="{{ key }}" value="{{ value }}">
                {% endif %}
            {% endfor %}

            <input
                type="number"
                name="page"
                class="form-control form-control-sm mx-1"
                min="1"
                max="{{ page_obj.paginator.num_pages }}"
                value="{{ page_obj.number }}"
                style="width: 60px;"
            >
            <button type="submit" class="btn btn-sm btn-outline-secondary">跳转</button>
        </form>
    </li>
    </ul>
    {% endif %}
   </div>
  </body>
<script>
// 全选/全不选功能
document.getElementById('selectAll').addEventListener('change', function(e) {
    // 获取所有行的复选框
    const checkboxes = document.querySelectorAll('.delete-item');
    // 同步全选框的状态到所有复选框
    checkboxes.forEach(checkbox => {
        checkbox.checked = e.target.checked;
    });
});
</script>
</html>
